<template>
	<view>
		<view :class="curTheme" :style="{height: `${statusBarHeight}px`}" class="cal"></view>
		<!--设置开始-->
		<!--设置头部部分-->
		<view v-if="setStatus" :class="curTheme" class="fixed-top shadow animated slideInDown cal" style="z-index: 1;">
			<view :style="{height: `${statusBarHeight}px`}"></view>
			<view class="flex align-center" style="height: 80rpx" @tap="quit">
				<iconfont class="px-2" iconId="icon-jiantou-copy"></iconfont>
				<text>{{novalName}}</text>
				<text class="flex-1 px-2 font-sm text-ellipsis">章节:{{curChapterTitle}}</text>
			</view>
		</view>

		<!-- 设置底部部分 -->
		<view v-if="setStatus" :class="curTheme"
			class="fixed-bottom flex align-center shadow font animated slideInUp cal"
			style="height: 200rpx; z-index: 1;">
			<view class="flex-1 flex flex-column align-center" @tap="showCataLog">
				<iconfont iconId="icon-xueyuan-mulu" iconSize="55"></iconfont>
				<view>目录</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @tap="isNight">
				<iconfont iconId="icon-yanjing" iconSize="55"></iconfont>
				<view>夜间模式</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @tap="changeTypeFaceStatus(true)">
				<iconfont iconId="icon-ziti1" iconSize="55"></iconfont>
				<view>字体</view>
			</view>
			<view class="flex-1 flex flex-column align-center" @tap="changeMoreStatus(true)">
				<iconfont iconId="icon-diqiuhuanqiu" iconSize="55"></iconfont>
				<view>更多</view>
			</view>
		</view>
		<!--设置结束-->

		<!--章节目录开始-->
		<uni-drawer ref="catalogDrawer" mode="left" @change="changeDrawerStatus">
			<view :style="{height: `${statusBarHeight}px`}"></view>
			<view class="flex align-center justify-center" style="height: 80rpx">章节选择</view>
			<scroll-view scroll-y :style="{height: `${calHeight - 80}rpx`}">
				<block v-for="(item, index) in chapterCatalog" :key="item.id">
					<view class="px-1 py-2 font text-ellipsis" :class="{'curChapter': chapterIndex === index}"
						hover-class="pulse" @tap="toPointChapter(index)">{{item.title}}</view>
				</block>
			</scroll-view>
		</uni-drawer>
		<!--章节目录结束-->

		<!-- 字体设置开始 -->
		<view v-if="typeFaceStatus" :class="curTheme" class="fixed-bottom shadow px-3 pt-2" style="height: 180rpx;">
			<view class="flex">
				字体:
				<slider class="flex-1" :value="myFontSize" min="20" max="50" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="changeFontSize" @changing="changeFontSize" />
			</view>
			<view class="flex">
				间距:
				<slider class="flex-1" :value="myLineHeight" min="20" max="100" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="changeLineHeight" @changing="changeLineHeight" />
			</view>
		</view>
		<!-- 字体设置结束 -->

		<!-- 更多设置开始 -->
		<view v-if="moreStatus" :class="curTheme" class="fixed-bottom flex flex-column justify-center shadow px-3 animated slideInUp"
			style="height: 250rpx;">
			<!-- #ifndef H5 -->
			<view class="flex align-center">
				亮度:
				<slider class="flex-1" :value="brightNess" min="0" max="100" block-size="16" activeColor="#34495E"
					backgroundColor="#ECF1F0" @change="setBrightNess" />
			</view>
			<!-- #endif -->
			
			<view class="flex font text-light-black" style="justify-content: space-between;">
				<block v-for="item in themes" :key="item.id">
					<view class="flex-1">
						<view :class="item.id" class="border rounded mx-1" style="height: 80rpx;"
							@tap="changeThemeIndex(item.id)"></view>
						<view class="text-center">{{item.name}}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 更多设置结束 -->

		<!-- 文本开始 -->
		<swiper :class="curTheme"
			:style="{height: `${calHeight}rpx`, fontSize: `${myFontSize}px`, lineHeight: `${myLineHeight}px`}"
			:current="chapterIndex" class="px-2" @tap="changeSetStatus" @change="changeChapter">
			<swiper-item v-for="item in LoadedChapters" :key="item.id">
				<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
					<uni-load-more status="loading" v-if="!item.text"></uni-load-more>
					<rich-text :nodes="item.text"></rich-text>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 文本结束 -->
	</view>
</template>

<script>
	// import test from '@/common/test.js';
	import unit from '@/common/unit.js';
	import parseHtml from '@/common/html-parser.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';

	let testContent = null;
	export default {
		data() {
			return {
				statusBarHeight: this.$statusBarHeight,
				calHeight: 0,
				setStatus: false,
				typeFaceStatus: false,
				moreStatus: false,
				chapterIndex: 0,
				novalName: '请稍后', //小说名称
				chapterCatalog: [{id: 1, title:''}], //小说目录
				LoadedChapters: [{id: 1, title:''}],
				myFontSize: uni.getStorageSync('myFontSize') || 20,
				myLineHeight: uni.getStorageSync('myLineHeight') || 40,
				brightNess: 0, // 亮度值
				themes: [{
						id: 'blueTheme',
						name: '天蓝'
					},
					{
						id: 'eyeHelpTheme',
						name: '护眼'
					},
					{
						id: 'lightGretTheme',
						name: '淡灰'
					},
					{
						id: 'morningTheme',
						name: '早晨'
					},
					{
						id: 'nightTheme',
						name: '夜间'
					}
				],
				themeIndex: uni.getStorageSync('themeIndex') || uni.getStorageSync('themeIndex') === 0 ? uni.getStorageSync('themeIndex') : 3
			}
		},
		computed: {
			curChapterTitle() {
				if(!this.chapterCatalog[this.chapterIndex].title){
					return '加载中';
				}
				return this.chapterCatalog[this.chapterIndex].title;
			},
			// 当前主题
			curTheme() {
				return this.themes[this.themeIndex].id
			}
		},
		components: {
			uniLoadMore,
			uniDrawer
		},
		onLoad(option) {
			const id = option.chapterID || 1;
			this.init(parseInt(id));
		},
		created() {
			//获取剩余高度
			// #ifdef MP-WEIXIN
			const height = unit.getSystemHeight({isRpx: true}) - unit.Torpx(this.statusBarHeight) + 100; //50px(100rpx)为tabbar的高度
			// #endif
			// #ifndef MP-WEIXIN
			const height = unit.getSystemHeight({isRpx: true}) - unit.Torpx(this.statusBarHeight);
			// #endif
			this.calHeight = Math.floor(height);
			//如果不是H5端才获取屏幕亮度(H5端uni.getScreenBrightness报错)
			// #ifndef H5
			//获取屏幕亮度
			this.getBrightNess();
			// #endif
		},
		// mounted() {
		// 	unit.calSurplusHeight({
		// 		pageID: this,
		// 		pos: 'cal',
		// 		success: val => this.calHeight = val
		// 	})
		// },
		methods: {
			quit(){
				uni.navigateBack({delta: 1});
			},
			changeSetStatus() {
				if (!this.setStatus) {
					if (this.typeFaceStatus || this.moreStatus) {
						this.changeTypeFaceStatus(false);
						this.changeMoreStatus(false);
						return
					}
				}
				this.setStatus = !this.setStatus;
			},
			changeTypeFaceStatus(bool) {
				this.typeFaceStatus = bool;
				if (this.typeFaceStatus) {
					this.changeSetStatus();
				}
			},
			// 改变更多设置部分状态
			changeMoreStatus(Bol) {
				this.moreStatus = Bol;
				if (this.moreStatus) {
					this.changeSetStatus();
				}
			},
			async init(id){
				const {content} = await this.$http.get('/testContent');
				testContent = content;
				let res = await this.$http.get('/testSynopsis');
				this.novalName = res.name;
				this.chapterCatalog = res.chapterCatalog;
				
				const curIndex = this.chapterCatalog.findIndex(item => item.id === id);
				this.changeIndex(curIndex);
				this.PreLoad();    //预加载
				this.DeplyLoad();  //懒加载
			},
			// 预加载
			PreLoad() {
				this.LoadedChapters.shift();
				this.chapterCatalog.forEach(item => this.LoadedChapters.push({
					id: item.id,
					title: item.title,
					text: ''
				}))
			},
			// 延迟加载
			DeplyLoad() {
				const index = this.chapterIndex;
				if (this.LoadedChapters[index].text === '') {
					setTimeout(() => {
						this.LoadedChapters[index].text = parseHtml(testContent[index].text);
					}, 1000)
				}
			},
			changeIndex(index) {
				this.chapterIndex = index;
			},
			changeChapter(e) {
				this.changeIndex(e.detail.current);
				this.DeplyLoad();
			},
			showCataLog() {
				this.$refs.catalogDrawer.open();
			},
			hideCataLog() {
				this.$refs.catalogDrawer.close();
			},
			changeDrawerStatus(isOpen) {
				if (isOpen) {
					this.changeSetStatus();
				}
			},
			toPointChapter(index) {
				if (this.chapterIndex === index) {
					return;
				}
				this.changeIndex(index);
				this.DeplyLoad();
				this.hideCataLog();
			},
			// 改变字体大小
			changeFontSize(e) {
				this.myFontSize = e.detail.value;
				uni.setStorageSync('myFontSize', this.myFontSize)
			},
			// 改变行文间距
			changeLineHeight(e) {
				this.myLineHeight = e.detail.value;
				uni.setStorageSync('myLineHeight', this.myLineHeight)
			},
			// 获取亮度
			getBrightNess() {
				//console.log() 发现 e.value 的取值是 0-8, /8 后就是 0-1，*100 是因为slider的max是100
				uni.getScreenBrightness({
					success: e => this.brightNess = Math.floor(e.value) / 8 * 100
				})
			},
			// 设置亮度
			setBrightNess(e) {
				let newVal = e.detail.value;
				this.brightNess = newVal;
				uni.setScreenBrightness({
					value: newVal * 8 / 100
				})
			},
			// 更改主题标识
			changeThemeIndex(id) {
				const index = this.themes.findIndex(theme => theme.id === id);
				this.themeIndex = index;
				uni.setStorageSync("themeIndex", this.themeIndex);
			},
			//是否夜间模式
			isNight() {
				this.themeIndex !== 4 ? this.changeThemeIndex('nightTheme') : this.changeThemeIndex('morningTheme')
			}
		}
	}
</script>

<style>
	.curChapter {
		color: #ffffff;
		background-color: #8395a7;
	}
</style>
